<!--个人信息 -->
<template>
	<div class="contact">
		<div class="usermsg flex">
			<div class="usermsgl">
				<el-upload
				  class="avatar-uploader"
				  :action="apifun.hrefURL + '/pc/upload/uploadAvatar'"
				  name="file"
				  :headers="token"
				  :show-file-list="false"
				  :on-success="handleAvatarSuccess"
				  :before-upload="uploadfile.fileImg"
				  >
				  <div class="usermsgl-img">
					<img  class="usermsg-headimgav" v-if="avatar" :src="apifun.URLimg+avatar" alt="头像" />
					<img class="usermsg-headimgav" v-if="!avatar" src="@/assets/logosvg.png" alt="头像" />
				  </div>
				  <div class="usermsgl-imgbtn mainbg curpoin">上传</div>
				</el-upload>
			</div>
			<div class="usermsgr flex">
				<div class="usermsgreach flex" style="margin-right:40px;">
					<span class="usermsgreacht">昵称：</span>
					<input class="usermsgreachi" v-model="nickname" type="text" placeholder="请输入昵称~">
				</div>
				<div class="usermsgreach flex">
					<span class="usermsgreacht">手机号：</span>
					<input class="usermsgreachi" disabled v-model="phone" type="text" placeholder="请输入手机号~">
				</div>
			</div>
		</div>
		<div class="enter" style="margin: 37px auto;" @click="enter()">
			<el-button class="enter mainbg">保存</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				token:{
					Authorization:localStorage.getItem('token')
				},
				avatar:"",
				nickname:'',
				phone:''
			}
		},
		beforeCreate(){},
		mounted(){
			let UserInfo = this.$store.state.UserInfo
			this.nickname = UserInfo.realname;
			this.phone = UserInfo.mobile;
			this.avatar = UserInfo.avatar;
		},
		methods:{
			handleAvatarSuccess(res,file){
				this.avatar = URL.createObjectURL(file.raw);
				this.$store.dispatch('getusermsgfun',this.$store)
			},
			enter(){
				let sendData = {
					realname:this.nickname,
					mobile:this.phone
				}
				this.apifun.$post('/pc/user/setUserInfo',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.$store.dispatch('getusermsgfun',this.$store)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.usermsg{
		width:93%;
		margin: 10px auto;
		min-width: 570px;
		padding:25px 2% 30px;
		border-radius:10px;
		background-color: var(--bgColor);
		box-shadow: 0 5px 5px var(--boxShowColor);
	}
	.usermsgl{
		width: 70px;
		.usermsgl-img{
			width: 70px;
			height: 70px;
			.usermsg-headimgav{
				width: 70px;
				height: 70px;
				border-radius:10px;
			}
		}
		.usermsgl-imgbtn{
			width: 70px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius:50px;
			color:#fff;
			font-size:12px;
			margin-top: 6px;
		}
	}
	.usermsgr{
		margin-left: 20px;
		.usermsgreach{
			margin-top: 20px;
			.usermsgreacht{
				font-size:12px;
				color: #333;
				line-height:30px;
				font-weight: bold;
			}
			.usermsgreachi{
				padding: 0px 10px;
				width: 150px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #333;border: none;
				background-color: #fff;
				border-radius: 5px;
				outline:none;
			}
		}
	}
	.enter{
		width:340px;
		height: 48px;
		color: #fff;
		font-size:18px;
		text-align: center;
		border-radius:10px;
	}
	.enter:hover{
		color: #fff;
	}
</style>